<template>
	<div class="container">
		<go-back :title="projectName" />
		<div class="m-box">
			<w-block class="tree-box" title="任务列表">
				<el-scrollbar class="h-percent100">
					<el-tree
						class="mt-10"
						ref="oElTree"
						node-key="id"
						:data="treeList"
						:props="defaultProps"
						:default-expanded-keys="defaultExpandedKeys"
						highlight-current
						@node-click="handleNodeClick"
					>
						<p
							class="custom-tree-node"
							:class="{
								'disabled': data.isDutyDept=='0',
								'is-active': selectedTask ? data.id == selectedTask.id : false
							}"
							slot-scope="{ node, data }"
						>
							<span class="tree-node-title" :title="node.label">
								<span v-if="data.isTask==1" class="status">任务：</span>
								<span>{{ node.label }}</span>
							</span>
							<span
								v-if="stateText(data.status).value"
								class="status"
								:style="{color: stateText(data.status).color}">
								（{{stateText(data.status).value}}）
							</span>
						</p>
					</el-tree>
				</el-scrollbar>
			</w-block>
			<w-block class="r-v" title="信息上报">
				<template #list>
					<div v-if="selectedTask" class="task-box">
						<ul class="explain">
							<li class="tip-time" v-if="selectedTask.taskStartDate">
								计划开始时间: {{selectedTask.taskStartDate}}
							</li>
							<li class="tip-time" v-if="selectedTask.taskDoneDate">
								{{getDimTableItem({ key: selectedTask.spFlag, dimTableList: dictionaries.approvalState }).doneTimeTxt}}: {{selectedTask.taskDoneDate}}
							</li>
							<li class="tip-time">
								当前任务状态：{{getDimTableItem({ key: selectedTask.spFlag, dimTableList: dictionaries.approvalState }).value}}
							</li>
							<!--提交任务按钮置灰原因：-->
							<li class="tip-time" v-if="judgeSubmitDiscription">
								{{judgeSubmitDiscription}}
							</li>
						</ul>
						<div class="flex-end">
							<el-button v-if="selectedTask.needApproved==1" type="default" @click="handleApprovalRecord">任务审批记录</el-button>
							<el-button type="primary" @click="handleSubmit" :disabled="judgeSubmit">
								提交任务
							</el-button>
						</div>
					</div>
				</template>
				<task-item-list @task-list-refresh="taskListRefresh" />
			</w-block>
		</div>
		<w-dialog :visible.sync="visible" height="400px" title="审批记录" width="1200px">
			<el-table
				ref="multipleTable"
				class="flex-1"
				:data="tableData"
				tooltip-effect="dark"
				stripe
				row-class-name="row-class-name"
				cell-class-name="cell-class-name"
				header-row-class-name="header-row-class-name"
				header-cell-class-name="header-cell-class-name"
				style="width:100%"
				height="1"
			>
				<el-table-column show-overflow-tooltip prop="submit_bat" label="审批批次" />
				<el-table-column show-overflow-tooltip prop="sp_level_desc" label="审批层级" />
				<el-table-column show-overflow-tooltip prop="sp_person_name" label="审批人" />
				<el-table-column show-overflow-tooltip prop="sp_dept_name" label="审批人部门" />
				<el-table-column show-overflow-tooltip prop="sp_time" label="审批时间" />
				<el-table-column show-overflow-tooltip prop="sp_content" label="审批结果" />
			</el-table>
			<template #footer>
				<div class="flex-end">
					<el-button type="primary" @click="visible=false">关 闭</el-button>
				</div>
			</template>
		</w-dialog>
	</div>
</template>
<script>
import { mapGetters }          from 'vuex'
import TaskItemList            from './task-item-list'
import GoBack                  from '@/components/go-back'
import { getDimTableItem }     from '@/utils/index.js'
import { itemInfo as service } from '@/services'


export default {
	name      : "tree-task",
	components: { TaskItemList, GoBack },
	data() {
		return {
			//
			projectId          : this.$route.params.id,
			projectName        : `项目名称：${ this.$route.query.projectName }`,
			visible            : false,
			tableData          : [],
			//
			defaultProps       : {
				children: 'subList',
				label   : 'name'
			},
			defaultExpandedKeys: [],
			treeList           : [],
		}
	},
	computed  : {
		...mapGetters(['dictionaries', 'selectedTask']),
		judgeSubmit() {
			//多次
			if (this.selectedTask.uploadLimit == '02') {
				//任务状态是未开始
				if (this.selectedTask.status == '01') { return true;}
				//任务状态是进行中 任务状态是已完成
				if (this.selectedTask.status == '02' || this.selectedTask.status == '03') {
					if (this.$store.state.disableTaskBtn) return true; //要件列表只要有一个表没有记录,不可以提交
					if (!this.selectedTask.spFlag) return false; //未提交审批 可以提交
					if (this.selectedTask.spFlag == '0') return true; //正在审批中 不可以提交
					if (this.selectedTask.spFlag == '2') return false; //审批被驳回 可以提交
					if (this.selectedTask.spFlag == '1') {
						//审批全部通过 要看又有没有增加的项, 若有则可以提交, 反之不可以提交
						if (this.selectedTask.haveNewItem == '0') return true;
						if (this.selectedTask.haveNewItem == '1') return false;
					}
				}
			}
			//仅一次
			else if (this.selectedTask.uploadLimit == '01') {
				if (this.selectedTask.status != '02') return true; //任务不是进行中的,不可以提交
				if (this.$store.state.disableTaskBtn) return true; //要件列表只要有一个表没有记录,不可以提交
				if (!this.selectedTask.spFlag) return false; //未提交审批 可以提交
				if (this.selectedTask.spFlag == '0') return true; //正在审批中 不可以提交
				if (this.selectedTask.spFlag == '2') return false; //审批被驳回 可以提交
				if (this.selectedTask.spFlag == '1') {
					//审批全部通过 要看又有没有增加的项, 若有则可以提交, 反之不可以提交
					if (this.selectedTask.haveNewItem == '0') return true;
					if (this.selectedTask.haveNewItem == '1') return false;
				}
			}
		},
		judgeSubmitDiscription() {
			//多次
			if (this.selectedTask.uploadLimit == '02') {
				//任务状态是未开始
				if (this.selectedTask.status == '01') { return '提交任务按钮置灰原因：任务未开始';}
				//任务状态是进行中 任务状态是已完成
				if (this.selectedTask.status == '02' || this.selectedTask.status == '03') {
					if (this.$store.state.disableTaskBtn) return '提交任务按钮置灰原因：有未上传要件'; //要件列表只要有一个表没有记录,不可以提交
					if (!this.selectedTask.spFlag) return '提交任务按钮可点击原因：含有需多次提交的要件 且 未提交审批'; //未提交审批 可以提交
					if (this.selectedTask.spFlag == '0') return '提交任务按钮置灰原因：任务正在审批中'; //正在审批中 不可以提交
					if (this.selectedTask.spFlag == '2') return '提交任务按钮可点击原因：含有需多次提交的要件 且 审批被驳回'; //审批被驳回 可以提交
					if (this.selectedTask.spFlag == '1') {
						//审批全部通过 要看又有没有增加的项, 若有则可以提交, 反之不可以提交
						if (this.selectedTask.haveNewItem == '0') return '提交任务按钮置灰原因：任务已经完成';
						if (this.selectedTask.haveNewItem == '1') return '提交任务按钮可点击原因：含有需多次提交的要件 且 任务已经完成但有新增加的要件';
					}
				}
			}
			//仅一次
			else if (this.selectedTask.uploadLimit == '01') {
				if (this.selectedTask.status != '02') return '提交任务按钮置灰原因：任务未在进行中'; //任务不是进行中的,不可以提交
				if (this.$store.state.disableTaskBtn) return '提交任务按钮置灰原因：有未上传要件'; //要件列表只要有一个表没有记录,不可以提交
				if (!this.selectedTask.spFlag) return '提交任务按钮可点击原因：未提交审批'; //未提交审批 可以提交
				if (this.selectedTask.spFlag == '0') return '提交任务按钮置灰原因：任务正在审批中'; //正在审批中 不可以提交
				if (this.selectedTask.spFlag == '2') return '提交任务按钮可点击原因：审批被驳回'; //审批被驳回 可以提交
				if (this.selectedTask.spFlag == '1') {
					//审批全部通过 要看又有没有增加的项, 若有则可以提交, 反之不可以提交
					if (this.selectedTask.haveNewItem == '0') return '提交任务按钮置灰原因：任务已经完成';
					if (this.selectedTask.haveNewItem == '1') return '提交任务按钮可点击原因：任务已经完成但有新增加的要件';
				}
			}
			return ''
		}
	},
	watch     : {
		['$route']() {
			this.getTreeData()
		}
	},
	methods   : {
		getDimTableItem,
		_findEqualID({ id, list }) {
			let node = null;

			function getNode(id, list) {
				//1.第一层 root 深度遍历整个JSON
				for (let i = 0; i < list.length; i++) {
					if (node) {
						break;
					}
					let obj = list[i];
					//没有就下一个
					if (!obj || !obj.id) {
						continue;
					}

					//2.有节点就开始找，一直递归下去
					if (obj.id == id) {
						//找到了与nodeId匹配的节点，结束递归
						node = obj;
						break;
					}
					else {
						//3.如果有子节点就开始找
						if (obj.subList) {
							//4.递归前，记录当前节点，作为parent 父亲
							//递归往下找
							getNode(id, obj.subList);
						}
						else {
							//跳出当前递归，返回上层递归
							continue;
						}
					}
				}

				//6.返回结果obj
				return node
			}

			return getNode(id, list);
		},
		async getTreeData({ addTrees } = {}) {
			this.treeList = await service.getTreeData(this.projectId);//获取树
			console.log('this.treeList', this.treeList);
			this.defaultExpandedKeys = this.treeList.map(item => item.id);//展开节点
			if (typeof addTrees === 'object' && addTrees && 'id' in addTrees) {
				this.defaultExpandedKeys = [...this.defaultExpandedKeys, addTrees.id];//追加展开默认节点
				const newTree = this._findEqualID({
					id  : addTrees.id,
					list: this.treeList
				})
				console.log('newTree', newTree);
				this.handleNodeClick(newTree);
			}
			else if (typeof addTrees === 'string' && addTrees) {
				this.defaultExpandedKeys = [...this.defaultExpandedKeys, addTrees];//追加展开默认节点
				const newTree = this._findEqualID({
					id  : addTrees,
					list: this.treeList
				})
				console.log('newTree', newTree);
				this.handleNodeClick(newTree);
			}
		},
		handleNodeClick(data) {
			console.log(data);
			//如果不是本部门, 开发时一般注释掉 wgm
			if (data.isDutyDept != '1') {
				//如果点击的是任务, 给出一个友好提示
				(data.isTask == '1') && this.$message.warning(`需要本部门才能查看任务要件`);
				return;
			}
			if (!data || !('id' in data)) return;
			if (+data.isTask) {
				this.$store.dispatch('changeSelectedTask', data)
			}
		},
		stateText(v) {
			return this.dictionaries.jobState.find(e => e.key == v) || {}
		},
		async handleApprovalRecord() {
			this.visible = true;
			console.log(this.selectedTask)
			const result = await service.querySpHis_byTask({
				"rel_project_id": +this.projectId,
				"rel_task_id"   : this.selectedTask.taskPzId,
				"without_user"  : 1
			})
			if (Array.isArray(result) && result.length) {
				this.tableData = result
			}
		},
		handleSubmit() {
			this.$alert(`提交当前任务`, '确认提交', {
				confirmButtonText: '确定',
				callback         : async action => {
					if (action === 'confirm') {
						const result = await service.commitTask({
							"prjId" : +this.projectId,
							"workId": this.selectedTask.rtaProTaskInfo.relWorkId,
							"taskId": +this.selectedTask.taskPzId
						})
						if (result.code == 0) {
							this.$message.success(`提交任务成功`);
							this.$store.dispatch('getHeaderTotals')
							this.getTreeData({
								addTrees: this.selectedTask
							});
						}
						else {
							this.$message.warning(`提交任务失败`)
						}
					}
				}
			})
		},
		taskListRefresh(selectedTask) {
			this.getTreeData({
				addTrees: selectedTask
			});
		},
	},
	mounted() {
		this.getTreeData({
			addTrees: this.$route.query.taskPzId || ''
		});
	},
	beforeDestroy() {
		this.$store.dispatch('changeSelectedTask', null)
	}
}
</script>
<style lang="scss" scoped>
	@import "~@/assets/css/_variables.scss";

	.tree-box /deep/ {
		.el-scrollbar__wrap {
			overflow-x: hidden;
		}

		.el-scrollbar__view {
			min-height: 100%;
		}

		.el-fade-in-linear-leave-active {
			transition: none;
		}
	}

	.container {
		@include flex-column(flex-start, flex-start);
		height: 100%;

		.h-box {
			@include flex-start();
			width: fit-content;
		}

		.m-box {
			@include flex-start(flex-start);
			@include flex-1();
			margin-top: 20px;
			width: 100%;
			height: 780px;
			border-radius: 4px;
			overflow: hidden;

			.tree-box {
				max-width: 570px;
				width: 25%;
				height: 100%;
				padding-right: 0;
			}

			.r-v {
				margin-left: 20px;
				@include flex-1();
				height: 100%;
				overflow-y: auto;
			}
		}
	}

	.h-box-right {
		@include space-between();
		width: 100%;
	}

	.task-box {
		width: 100%;
		@include space-between();
		padding-left: 20px;
	}

	.explain {
		@include flex-start();
		flex-wrap: wrap;

		.tip-time {
			width: fit-content;
			min-width: fit-content;
			font-size: 12px;
			line-height: 18px;
			margin-right: 30px;
		}
	}

	.custom-tree-node {
		width: 100%;
		line-height: 1;
		height: 26px;
		@include flex-start();

		.tree-node-title {
			max-width: 70%;
			width: fit-content;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&.disabled {
			color: #c0c4cc;
			cursor: no-drop;
		}

		&.is-active {
			background-color: #f1f5fe;
		}
	}

	.status {
		font-size: 12px;
	}
</style>
